<template>
  <div class="wrapper">
    <!-- header部分 -->
    <header>
      <p class="font">密码找回</p>
    </header>
    <!-- 表单部分 -->
    <ul class="form-box">
      <li class="phone">
        <div class="content">
          <input type="text" v-model="user.userId" placeholder="请输入11位手机号码">
        </div>
      </li>
      <li class="vertify">
        <!-- <div class="title">
          手机号码:
        </div> -->
        <div class="content">
          <input type="text" v-model="vertifyCode" placeholder="请输入验证码">
        </div>
      </li>
      <li class="button">
        <div class="button-get">
          <button @click="getCode" :disabled="isButtonDisabled" ref="mybutton">获取验证码</button>
        </div>
      </li>
    </ul>
    <div class="button-regist">
      <button @click="find">立即找回</button>
    </div>
    <!-- 底部菜单部分 -->
    <Footer></Footer>
  </div>
</template>
<script>
import Footer from '../components/Footer.vue';
export default {
  name: 'Forget',
  data() {
    return {
      user: {
        userId: '',
      },
      confirmPassword: '',
      isButtonDisabled: false,
      vertifyCode: '',
    }
  },
  methods: {
    find() {
      //验证码匹配
      const storedRandomNumber = localStorage.getItem('testNum');
      if (this.vertifyCode === '') {
        alert('验证码不能为空！');
        return;
      }
      if (this.vertifyCode !== storedRandomNumber) {
        alert('验证码错误！');
        return;
      }
      //验证码通过后就可以获取密码了
      //这里是通过userId查询user以达到查询密码的功能
      this.$axios.get(`users/secret/${this.user.userId}`
      ).then(response => {
        console.log(response);
        alert(`您的密码为：${response.data}`)
        this.$router.push('/login')
      }).catch(error => {
        console.error(error);
      });

    },
    getCode() {
      //检查手机号码
      //先检查一下是否有这个手机号
      this.$axios.get(`users/${this.user.userId}`,
      ).then(response => {
        console.log(response);
        if (response.status === 200) {
          alert(`验证码为:${randomNumber}`);
        }
      }).catch(error => {
        console.error(error);
        this.user.userId = '';
        alert('请检查该手机号是否被注册过！')
        return;
      });

      let btn = this.$refs.mybutton;
      btn.style.backgroundColor = '#666';
      const vm = this;
      vm.isButtonDisabled = true; // 禁用按钮
      let num = 10;

      //随机生成一个四位数
      const randomNumber = Math.floor(1000 + Math.random() * 9000);
      localStorage.setItem('testNum', randomNumber.toString());


      btn.innerHTML = `${num}秒后重新获取`
      let timer = setInterval(function () {
        num--
        btn.innerHTML = `${num}秒后重新获取`
        if (num === 0) {
          vm.isButtonDisabled = false; // 5秒后重新启用按钮
          btn.style.backgroundColor = '#38CA73';
          btn.innerHTML = '获取验证码';
          localStorage.setItem('testNum', '');
          clearInterval(timer);
        }
      }, 1000)
    },
  },
  components: {
    Footer
  }
}
</script>
<style scoped>
/*********** 总容器 ***********/
.wrapper {
  width: 100%;
  height: 100%;
}

/*********** header部分 ***********/
.wrapper header {
  width: 100%;
  height: 12vw;
  background-color: #0097ff;
  color: #fff;
  font-size: 4.8vw;

  position: fixed;
  left: 0;
  top: 0;
  /* 提高层次 */
  z-index: 1000;

  display: flex;
  justify-content: space-around;
  align-items: center;
}

/*********** 表单部分 ***********/
.wrapper .form-box {
  width: 100%;
  margin-top: 15vw;
}

.wrapper .form-box li {
  box-sizing: border-box;
  padding: 4vw 3vw 0 3vw;
  /* margin-top: 2vw; */

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .form-box li .content input {
  font-size: 3.5vw;
  padding: 4.5vw 15vw;
  border-radius: 20px;
  border: 0.5px solid #999;
}

.wrapper .form-box li .button-get {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .button-get button {

  font-size: 16px;
  padding: 3.5vw 15vw;
  background-color: #38CA73;
  border-radius: 25px;
  border: none;
  color: #fff;
}

.wrapper .button-regist {
  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .button-regist button {
  margin-top: 5vw;
  font-size: 16px;
  padding: 3.5vw 28.3vw;
  background-color: #0097ff;
  border-radius: 25px;
  border: none;
  color: #fff;
}
</style>